<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德地图测试</title>
    <style type="text/css">
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <style type="text/css">
        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }

        #panel .amap-call {
            background-color: #009cf9;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        #panel .amap-lib-driving {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            overflow: hidden;
        }
    </style>

    <!--    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->
<!--    <script type="text/javascript">-->
<!--        window._AMapSecurityConfig = { serviceHost: "http://astmswebtest.csvw.com:8003/_AMapService/", };-->
<!--    </script>-->
    <!--    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>-->
<!--    <script type="text/javascript"-->
<!--            src="https://webapi.amap.com/maps?v=2.0&key=ec8361ad784cc315dca889247737fb91&plugin=AMap.Driving"></script>-->
    <script src="./amap_driving.js"></script>

    <!--    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>-->
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
    //基本地图加载
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],//地图中心点
        zoom: 13 //地图显示的缩放级别
    });
    // 加载工具条插件并添加到地图上
    map.plugin(["AMap.ToolBar"], function () {
        map.addControl(new AMap.ToolBar());
    });
    //滚轮
    map.setStatus({scrollWheel: false})

    var pathAll = [
        {
            "lnglat": [
                121.225043,
                31.444308
            ],
            "date": "2018/10/01 01:01:01",
            "info": "SC501"
        },
        {
            "lnglat": [
                118.3509739,
                29.7302498
            ],
            "date": "2018/10/02 02:02:02",
            "info": ""
        },
        {
            "lnglat": [
                118.2664005,
                29.7677187
            ],
            "date": "2018/10/02 02:02:02",
            "info": ""
        },
        {
            "lnglat": [
                118.1824175,
                28.4658943
            ],
            "date": "2018/10/02 02:02:02",
            "info": ""
        },
        {
            "lnglat": [
                117.9561311,
                28.4045033
            ],
            "date": "2018/10/02 02:02:02",
            "info": ""
        },
        {
            "lnglat": [
                117.9346278,
                28.4616569
            ],
            "date": "2018/10/02 02:02:02",
            "info": ""
        },
        {
            "lnglat": [
                117.9000621,
                28.4537267
            ],
            "date": "2018/10/02 02:02:02",
            "info": ""
        },
        {
            "lnglat": [
                117.1912012,
                29.3325121
            ],
            "date": "2018/10/02 02:02:02",
            "info": ""
        },
        {
            "lnglat": [
                117.1909491,
                29.3319925
            ],
            "date": "2018/10/03 03:03:03",
            "info": ""
        },
        {
            "lnglat": [
                116.7131916,
                28.9949006
            ],
            "date": "2018/10/03 03:03:03",
            "info": ""
        },
        {
            "lnglat": [
                116.0989329,
                29.7377114
            ],
            "date": "2018/10/03 03:03:03",
            "info": ""
        },
        {
            "lnglat": [
                116.026008,
                29.7026798
            ],
            "date": "2018/10/03 03:03:03",
            "info": ""
        },
        {
            "lnglat": [
                115.8890797,
                29.6213331
            ],
            "date": "2018/10/03 03:03:03",
            "info": "60214"
        }
]


    var colors = "#000000";
    MapLoad(pathAll, colors);

    function MapLoad(data, color) {
        var path = data;
        //构造路线导航类
        var driving = new AMap.Driving({
            map: map,
            policy: 0,
            size: 4,
            hideMarkers: true,
            showTraffic: false,
            outlineColor: color
            // panel: "panel"
        });
        var tujin = []
        path.forEach(function (items) {

            tujin.push(items.lnglat)
        })
        console.log(tujin)

        // 根据起终点名称规划驾车导航路线
        if (path.length >= 2) {
            var start =path[0].lnglat;
            var end = path[path.length - 1].lnglat;
            // driving.search()
            driving.search(start, end, {
                waypoints: tujin
            }, function (status, result) {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                    console.log('绘制驾车路线完成');
                } else {
                    console.error('获取驾车数据失败：' + result);
                }
            });
        } else {
            console.error('路径数据不足，至少需要两个点来规划路线');
        }

        // 加载点
        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(25, 34),
            // 图标的取图地址
            image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(135, 40),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(-9, -3)
        });
        var endIcon = new AMap.Icon({
            size: new AMap.Size(25, 34),
            image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-96, -3)
        });
        var viaIcon = new AMap.Icon({
            size: new AMap.Size(25, 34),
            image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-52, -3)
        });


        for (var i = 0; i < path.length; i++) {
            // console.log(path[i])
            var marker;
            var tishitext =  path[i].info+"\r\n"+"时间："+path[i].date;
            // tishitext += "<p class='input-item'>时间：" + path[i].date + "</p>";
            if (i == 0) {
                marker = new AMap.Marker({
                    map: map,
                    icon: startIcon,
                    title:tishitext,
                    position: path[i].lnglat,
                    offset: new AMap.Pixel(-13, -30)
                });
            } else if (i == path.length - 1) {
                marker = new AMap.Marker({
                    map: map,
                    icon: endIcon,
                    title:tishitext,
                    position: path[i].lnglat,
                    offset: new AMap.Pixel(-13, -30)
                });
            } else {
                console.log(path[i].info)
                marker = new AMap.Marker({
                    map: map,
                    icon: viaIcon,
                    title:tishitext,
                    position: path[i].lnglat,
                    offset: new AMap.Pixel(-13, -30),
                    // label: {content: tishitext, direction: 'top'}
                });
            }
            // label: {content: tishitext, direction: 'top'}
            // marker.content = "<p class='input-item'>" + path[i].info + "</p>";
            // marker.content += "<p class='input-item'>时间：" + path[i].date + "</p>";
            marker.on("click", openInfo);
        }

    }

    //在指定位置打开信息窗体
    function openInfo(e) {
        console.log(e)
        var infoWindow = new AMap.InfoWindow({
            closeWhenClickMap: true
        });
        infoWindow.setContent(e.target.getContent());
    }

    // //基本地图加载
    // var map = new AMap.Map("container", {
    //     resizeEnable: true,
    //     center: [113.884123,34.724415],//地图中心点
    //     zoom: 30 //地图显示的缩放级别
    // });
    // //构造路线导航类
    // var driving = new AMap.Driving({
    //     map: map,
    //     panel: "panel"
    // });
    // // 根据起终点名称规划驾车导航路线
    // driving.search([
    //     {keyword: '二七区正商城泰园三号院',city:'郑州'},
    //     {keyword: '郑州东站',city:'郑州'}
    // ], function(status, result) {
    //     // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
    //     if (status === 'complete') {
    //         log.success('绘制驾车路线完成')
    //     } else {
    //         log.error('获取驾车数据失败：' + result)
    //     }
    // });
</script>
</body>
</html>